<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/static/layer/theme/default/layer.css">
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.global.js"></script>
    <script src="/static/layer/layer.js"></script>
	<script src="/static/js/echarts.min.js"></script>
    <title>个人信息</title>
</head>
<body>
   {% include 'commonNav.html' %}
	
	<!-- 充值窗口 -->
	<div class="cvs" id="cvs2_logon" style="display:none">
		
		<div class="newModWin zfb-win">
			<section class="clearfix">
				<div class="title">支付宝快速充值兑换积分</div>
				<!-- 关闭弹出层 -->
				<div class="close" id="cvs2-close"></div>
			</section>
			
			<div class="zfb">
				<div class="clearfix">
					<input type="number" name="money" placeholder="请输入充值金额,单位元"/>
					<input type="button" class="zfb-btn" value="充值" />
				</div>
				<b>充值比例：1元=10积分</b>
			</div>
		</div>
	</div>
	<article>
		<!-- 网站主体 -->
		<div id="main" class="clearfix">
			<!-- 定义右侧窗口信息 -->
			<section class="aside">
				<aside class="users">
					<div class="pu">
						<p class="photo">
							<span class="lf">个人头像</span>
							<img class="rf" src="{{info.avatar.url}}" />
							<!-- 单击头像，修改用户头像 -->
							<input type="file" name="" accept="image/png,image/jpeg,image/jpg,image/gif">
						</p>

						<p class="tel disable" >
							<span class="lf">手机号码</span>
							<span class="rf">{{ info.user.username }}</span>
						</p>
						
						<p class="nickname">
							<span class="lf">昵称</span>
							<span class="rf">{{ info.nickname }}</span>
							
						</p>

						<p class="sex">
							<span class="lf">性别</span>
							<!--  如果一个模型属性 使用 choices 、要获取显示的内容 可以使用  get_<field>_display -->
							<span class="rf">{{ info.get_gender_display }}</span>
						</p>

						<p class="email">
							<span class="lf">邮箱</span>
							<span class="rf">{{ info.user.email }}</span>
						</p>
						<a href="modifypass.html">
							<p class="password">
								<span class="lf">密码</span>
							</p>
						</a>
					</div>
					
				</aside>

				<!-- 修改 昵称的 窗口 -->
				<aside class="modify-win nickname">
					<div class="title"><i></i>修改-昵称</div>
					<div class="content">
						<input type="text" name="" value="─╀0vЁ灬残夜">
						<button>确定修改</button>
					</div>
				</aside>
				<!-- 修改 性别的 窗口 -->
				<aside class="modify-win sex">
					<div class="title"><i></i>修改-性别</div>
					<div class="content">
						<input type="radio" name="sex" value="M" checked id="c-sex-m"><label for="c-sex-m">男</label>
						<input type="radio" name="sex" value="F" id="c-sex-f"><label for="c-sex-f">女</label>
						<input type="radio" name="sex" value="S" id="c-sex-s"><label for="c-sex-s">保密</label>
						<button>确定修改</button>
					</div>
				</aside>
				<!-- 修改 邮箱的 窗口 -->
				<aside class="modify-win email">
					<div class="title"><i></i>修改-邮箱</div>
					<div class="content">
						<input type="text" name="" value="" placeholder="请输入原注册的邮箱">
						<input type="text" name="" value="" placeholder="请输入新的邮箱">
						<button>确定修改</button>
					</div>
				</aside>
				
				<!-- 关注数 -->
				<aside class="psl">
					<a class="focus-on" href="./attention.html">关注数:<b>{{ fansAttach.attach|floatformat:0 }}</b></a>
					<a class="fan">粉丝数:<b>{{ fansAttach.fans|floatformat:0 }}</b></a>
				</aside>
				
				<aside class="info">
					<h1>
						<a>用户积分:<b class="so">0</b></a>
						<a class="zfb-cz-btn" onclick="$('#cvs2_logon').show();">支付宝积分充值</a>
					</h1>
					<!-- 图表形式显示积分  -->
					<div id="user-score-mark" class="u-mark"></div>
				</aside>
			</section>
			<section id="score-detail">
				<h1 class="detail-score">积分明细</h1>
				<ul class="person-info">
					<li>
						<strong class="c1">资源名称</strong>
						<strong class="c2">积分变动</strong>
						<strong class="c3">原因</strong>
						<strong class="c4">时间</strong>
					</li>
					<li v-if="scoreList.length === 0"><a>暂无数据</a></li>

					<li v-for="item in scoreList" :key="item.id">
					    <a class="c1 link" v-if="item.resource_name" :href="'/res/detail/' + item.res_id" v-text="item.resource_name"></a>
						<a class="c1" v-else>&lt;&lt;无资源&gt;&gt;</a>
						<span class="c2">#{item.score}</span>
						<span class="c3"> - #{item.remark}</span>
						<span class="c4">#{formatISO8601Date(item.create_time)}</span>
					</li>
				</ul>
				
				<!-- 使用分页组件 -->
				<Paginator v-model:page="page" :total-pages="totalPages" @click-page="getScoreList"/>

			</section>
			
		</div>
	</article>
	<footer>
		<p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
		<p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
		<p class="num">沪ICP备14048333号</p>
	</footer>

    {# 引入分页组件模板	#}
	{% include 'PaginationTemplate.html' %}

	<script>
		$(function() {
			// 修改个人信息
			$(".users .pu").on("click", ".nickname, .sex, .email" , function(event){
				$(this).parents(".users").slideUp();
				let cls = this.className ;
				$(`.modify-win.${cls}`).slideDown()
			})
			// 取消修改信息效果
			$(".modify-win i").on("click", function(event){
				console.log($(this).parents(".modify-win"))
				$(this).parents(".modify-win").slideUp()
				$("aside.users").slideDown()
			})

			const data = {{ echarts_data|safe }} ;
            // 获取 用户的所有积分
            const total_score = data.reduce((total, item) => total + parseInt(item.value), 0)
            $(".so").text(total_score);

			var option = {
				title: {
					text: '用户积分信息-积分统计',
					left: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				legend: {
					top: 'bottom',
					data: ['支付宝充值', '用户注册', '上传资源', '评论资源', '下载文件']
				},
				series: [
					{
						name: '积分来源',
						type: 'pie',
						radius: '50%',
						center: ['40%', '45%'],
						data: data.map(item => ({name: item.name, value: Math.abs(item.value)})),
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			echarts.init($("#user-score-mark").get(0)).setOption(option);
		})



Vue.createApp({
    data(){
        return {
            scoreList: [] , // 存储积分列表
            page: 1,  // 设置页码
            rows: 15, // 每页显示条数
            totalPages: 0, // 总页码
        }
    },
    created() {
        // 负责查询当前用户对应的积分列表
        this.getScoreList()
    },
    delimiters: ["#{", "}"],
    methods: {
        getScoreList() {
            axios.get('/user/score-list', {params: {page: this.page, rows: this.rows}})
                .then(res => {
                    if (res.data.code === 200) {
                        this.scoreList = res.data.list ;
                        this.totalPages = res.data.pages ;
                    }
                })
        },
        formatISO8601Date(dateStr) {
            return dateStr.replace("T", " ").replace(/\.\d+$/, "")
        }
    },
    components: {
        Paginator, // 组件组件
    }
}).mount("#score-detail")



	</script>
</body>

</html>